<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>好友地图</title>
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="../css/jquery-ui-1.8.18.custom.css" rel="stylesheet" />	
<link rel="stylesheet" type="text/css" media="screen, projection" href="../css/map.css" />
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="../js/markerclusterer_compiled.js"></script>
<script type="text/javascript">
  var map;
  var zoom=13;
  var directionDisplay;
  var directionsService=new google.maps.DirectionsService();
  var geocoder;
	

  function initialize() {
	directionDisplay= new google.maps.DirectionsRenderer();
	geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(31.191434,121.599437);
	
	// Try W3C Geolocation (Preferred)
  if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
      latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  }
  // Browser doesn't support Geolocation
  else {
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }


    var myOptions = {
      zoom: zoom,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	directionDisplay.setMap(map);
	var userMarker = new google.maps.Marker({
          map: map,
          position: latlng,
          icon: "../img/down.png",
		  draggable: true,
		  title : "I' m here."
     });
	
	  map.setCenter(latlng);
	
  }
  
  	function showFollowers(button){
  		$.ajax({
		url:"getFriendMap.action",
		type:"get",
		datatype:"json",
		success:function(data)
		{
			var markers=[];
			var info= [];
			//alert("YES"+data.followerList[0].xCoordinate);
			if(data.followerList.length>0){
				map.setCenter( new google.maps.LatLng(data.followerList[0].xCoordinate,data.followerList[0].yCoordinate));
			}
			for(var i=0; i< data.followerList.length ; i++){
			var infowindow = new google.maps.InfoWindow({
			  content: '<strong> Name: '+ data.followerList[i].nickname +'   关系：    关注</strong>'
			});
			latlng = new google.maps.LatLng(data.followerList[i].xCoordinate,data.followerList[i].yCoordinate);
			userMarker = new google.maps.Marker({
		    	map: map,
		        position: latlng,
				draggable: true,
				title : data.followerList[i].nickname
	        });
			markers.push(userMarker);
			info.push(infowindow);
			google.maps.event.addListener(markers[i], 'click', (function(i) {
				return function() { // closure
				info[i].open(map, this);}})(i));
			
				
			}
			markerClusterer	= new MarkerClusterer(map, markers);	
		},
		error:function(data)
		{
			alert("get follower map Wrong!");
		}
	});
  	
  	}
  

  	function showFollowees(button){
  		$.ajax({
		url:"getFriendMap.action",
		type:"get",
		datatype:"json",
		success:function(data)
		{
			var markers=[];
			var info= [];
			//alert("YES"+data.followeeList[0].xCoordinate);
			if(data.followeeList.length>0){
				map.setCenter( new google.maps.LatLng(data.followeeList[0].xCoordinate,data.followeeList[0].yCoordinate));
			}
			for(var i=0; i< data.followeeList.length ; i++){
			var infowindow = new google.maps.InfoWindow({
			  content: '<strong> 昵称: '+ data.followeeList[i].nickname + '   关系:  粉丝'+'</strong>'
			});
			latlng = new google.maps.LatLng(data.followeeList[i].xCoordinate,data.followeeList[i].yCoordinate);
			userMarker = new google.maps.Marker({
		    	map: map,
		        position: latlng,
				draggable: true,
				title : data.followeeList[i].nickname
	        });
			markers.push(userMarker);
			info.push(infowindow);
			google.maps.event.addListener(markers[i], 'click', (function(i) {
				return function() { // closure
				info[i].open(map, this);}})(i));
			
				
			}
			markerClusterer	= new MarkerClusterer(map, markers);	
		},
		error:function(data)
		{
			alert("get followee map Wrong!");
		}
	});
  	
  	}



    function handleNoGeolocation(errorFlag) {
    if (errorFlag == true) {
      //alert("Geolocation service failed.");
      initialLocation = newyork;
    } else {
      alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
      initialLocation = siberia;
    }
    map.setCenter(initialLocation);
  }


   function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
// 		for(var i=0; results[i]!=null ; i++){
//         var marker = new google.maps.Marker({
//             map: map, 
//             position: results[i].geometry.location,
// 			zoom: 15
//         });

// 		}
      } else {
        //alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }


</script>
</head>
<body onload="initialize()">
	<div class="sys-pic" id="head-pic"></div>
		<!-- 定义页面上方浮动栏 -->
		<div id="head-bar">
			<div id="bar-wrap">
				<a href="../gotoMain.action">
					<div class="sys-pic" id="logo"></div> </a>
				<!-- 使用clear属性清理浮动，下同 -->
				<div class="clear"></div>
			</div>
		</div>


  <span id="location">
    <input id="address" type="textbox" value="复旦大学" class="username">
    <input type="button" value="查看位置" onclick="codeAddress()" >
  </span>
  <span>
	<input type="button" value="查看好友" onclick="showFollowers(this)">
  </span>
   <span>
	<input type="button" value="查看粉丝" onclick="showFollowees(this)">
  </span>

<div id="map_canvas" style="height:90%;top:30px"></div>
</body>
</html>
